import React, {
    PureComponent
} from 'react';

import {
    View,
    StyleSheet
} from 'react-native';

import {
    Layout,
    TabView
} from './../../../components';

import Connect from './../../../utils/connect';

import Tabs from './tabs';
import Upgrade from './upgrade';
import Content from './content';
import * as Const from "../../../const";

const tabs = [
    {id:`visitor`,label:`Visitor`,upgrade:true,nameLabel:`viewed`},
    {id:`likedMe`,label:`Liked me`,upgrade:true,nameLabel:`liked`},
    {id:`liked`,label:`My likes`},
    {id:`matched`,label:`Matched`}
]

interface State {
    page:number
}

@Connect([`chat`,`user`])
class Connection  extends PureComponent<any,State>{
    state = {
        page:0
    }

    get chatState() {
        const {
            chat
        } = this.props;
        return chat;
    }

    get loginUser() {
        const {
            user
        } = this.props;
        const {
            loginUser = {}
        } = user;
        return loginUser;
    }

    get userId() {
        const {
            userId
        } = this.loginUser;
        return userId;
    }

    get isGuest() {
        const {
            isGuest = true
        } = this.loginUser;
        return isGuest;
    }

    get unRead() {
        const {
            unReadConnection
        } = this.chatState;
        return unReadConnection || {}
    }

    private getKey = (id:string) => {
        return `${id}_${this.userId}`;
    }

    get tabs() {
        return tabs.map((item:any) => {
            const {
                length
            } = this.unRead[
                this.getKey(item.id)
            ] || [];
            return {
                ...item,
                dotNum:length
            }
        })
    }

    private onTabChange = (page:number) => {
        this.setState({
            page:page
        })
    }

    private renderCenter = () => {
        const {
            page
        } = this.state;
        return (
            <Tabs
                page={page}
                tabs={this.tabs}
                onChange={this.onTabChange}
            />
        )
    }

    render() {
        const {
            page
        } = this.state;
        return (
            <Layout
                title="Likes"
                scroll={false}
                padding={false}
                backShow={false}
                renderCenter={() => (
                    this.renderCenter()
                )}
            >
                <TabView
                    page={page}
                    onChange={this.onTabChange}
                >
                    {tabs.map((item:any,i:number) => {
                        const {
                            id,
                            upgrade,
                            nameLabel
                        } = item;
                        if(this.isGuest && !!upgrade) {
                            return (
                                <Upgrade
                                    key={i}
                                    name={nameLabel}
                                />
                            )
                        }
                        return (
                            <Content
                                key={i}
                                orderBy={id}
                            />
                        )
                    })}
                </TabView>
            </Layout>
        )
    }
}

export default Connection;

const styles = StyleSheet.create({
    container:{
        flex:1
    }
}) as any;